<template>
  <div class="farmtypeselectmain">
    <div v-for="(item,index) in topitemSelectList" :key="item.itemTypeId" class="farmtypeselect" :class="index ===itemtypeactive? 'isfarmtypeselect':'notfarmtypeselect'" @click="itemtypeactive=index">
      {{ item.itemTypeName }}
    </div>
    <!-- 数据项类别选择 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemtypeactive: 0,
      topitemSelectList: [
        { itemTypeId: 1, itemTypeName: "物联数据项" },
        { itemTypeId: 2, itemTypeName: "水质监测" },
        { itemTypeId: 3, itemTypeName: "气象数据项" },
        { itemTypeId: 4, itemTypeName: "气象局数据" }
      ]
    }
  },
  watch: {
    itemtypeactive(newvalue) {
      this.setfarmtypeid(newvalue)
    }
  },
  mounted() {
    this.setfarmtypeid(0)
  },
  methods: {
    setfarmtypeid(i) {
      this.$emit('topitemtype', this.topitemSelectList[i]['itemTypeId'])
    }
  }
}
</script>
<style lang="scss" scoped>
.farmtypeselectmain{
  width: 100%;
  height: 50px;
  // background-color: aqua;
  display: flex;
  color: azure;
  font-size: 15px;
  font-weight: 600;
}
.farmtypeselect{
  position: relative;
  width: 100px;
  border: azure 1px solid;
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isfarmtypeselect{
  color: #507543;
  height: 49px;
  background-color: azure;
}
.notfarmtypeselect{
  top: 9px;
  height: 40px;
}
</style>
